<template>
  <view class="goods-container">
    <image :src="item.goods_small_logo" mode="widthFix"></image>
    <view class="goods-content">
      <text>{{ item.goods_name }}</text>
      <text>¥{{ item.goods_price }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ["item"],
}
</script>

<style lang="scss" scoped>
.goods-container {
  display: flex;
  align-items: center;
  padding: 20rpx;
  height: 180rpx;
  border-bottom: 1rpx solid #e2e2e2;

  image {
    width: 180rpx;
    height: 180rpx;
    margin-right: 20rpx;
  }

  .goods-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    height: 100%;

    text {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      font-size: 26rpx;

      &:last-child {
        font-size: 35rpx;
        color: #c00000;
      }
    }
  }
}
</style>
